<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
        >新增</el-button>
      </el-col>
<!--      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
        >修改</el-button>
      </el-col>-->
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
        >删除</el-button>
      </el-col>
<!--      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
        >导出</el-button>
      </el-col>-->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="lineUserList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="流水号" align="center" prop="id" v-if="false"/>
      <el-table-column label="用户名称" align="center" key="userName" prop="userName"  :show-overflow-tooltip="true" />
      <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"  :show-overflow-tooltip="true" />
      <el-table-column label="电子邮件" align="center" prop="email"  :show-overflow-tooltip="true" />
      <el-table-column label="手机号码" align="center" prop="phonenumber"  :show-overflow-tooltip="true" />
      <el-table-column label="线路标识" align="center" prop="lineId" />
      <el-table-column label="部门id" align="center" prop="deptId" />
      <el-table-column label="部门名称" align="center" prop="deptName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form ref="lineUsersRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="用户信息" prop="userName">
          <el-select v-model="form.userName" placeholder="请选择用户">
            <el-option
                v-for="dict in users"
                :key="dict.userName"
                :label="dict.nickName"
                :value="dict.userName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="LineUsers">
import {listLineUsersByLineId, getUserList, addLineUsers, delLineUsers} from "@/api/meas/lineUsers"
import {onMounted} from "vue";
import {addFiberInfo, delFiberInfo, updateFiberInfo} from "@/api/meas/fiberInfo";
const { proxy } = getCurrentInstance();

// const lineInfo = ref({})
const ids = ref([]);
const title = ref("");
const lineUserList = ref([])
const userList = ref([])
const users = ref([])
const showSearch = ref(true);
const loading = ref(true);
const single = ref(true);
const multiple = ref(true);
const open = ref(false);

const form = ref({})

const rules = ({
  userName: [
    { required: true, message: "请选择用户", trigger: "change" }
  ],
})

const props = defineProps({
  lineInfo: {
    type: Object,
    required: true,
    default: {
      id: -1,
      lineId: undefined,
      lineName: undefined,
      valid: false
    }
  }
})

function getList(){
loading.value = true
  try {
    listLineUsersByLineId(props.lineInfo.lineId).then(resp => {
      lineUserList.value = resp.data
    })

  }catch (e) {
    proxy.$alert("信息加载出错...");
  } finally {
    loading.value = false;
  }
}

function doGetUserList(){
  getUserList().then(resp => {
    userList.value = resp.data
  })
}

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 表单重置
function reset() {
  form.value = {
    lineId: props.lineInfo.lineId,
    userName: null
  }
  users.value = []
  userList.value.forEach(item => {
    let exists = false;
    for (let i of lineUserList.value) {
      if (i.userName === item.userName) {
        exists = true;
        break;
      }
    }
    if (!exists) {
      users.value.push(item);
    }
  })

}
function handleAdd(){
  reset()
  open.value = true;
  title.value = `添加线路[${props.lineInfo.lineName}]管理用户`;
}

function submitForm() {
  proxy.$refs["lineUsersRef"].validate(valid => {
    if (valid) {
      addLineUsers(form.value).then(resp => {
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getList();
      })
    }
  });
}

function handleDelete(row){
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除？').then(function() {
    return delLineUsers(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function handleExport(){

}
function cancel() {
  open.value = false;
  reset();
}

// onMounted(()=>{
//   init()
// })
function init(){
  doGetUserList()
  getList()
}
defineExpose({
  init
})
</script>

<style scoped>

</style>